<template>

    <Editor v-model="html" :init="init" :disabled="disabled" style="width: 100%"/>

</template>

<script setup name='smart-rich-editor'>
import {ref, watch} from 'vue'
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import './plugs'
import {plugins, toolbar, font} from './config'
import {UploadApi} from "@/libs/api";


const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },

})
const emit = defineEmits(['update:modelValue'])


// eslint-disable-next-line camelcase
const images_upload_handler = (blobInfo) => {

  return new Promise((resolve) => {
    const formData = new FormData()
    formData.append('file', blobInfo.blob())
    formData.set('scene', 'rich')
    UploadApi.formDataUploadImage(formData).then(res => resolve(res.data.url))

  })

}



const init = ref({
  plugins, toolbar,
  language: 'zh-Hans',
  directionality: 'ltr',
  skin_url: './tinymce/skins/ui/oxide',
  language_url: './tinymce/langs/zh-Hans.js',
  content_css: './tinymce/skins/ui/oxide/content.css',
  promotion: false,
  // menubar: 'file edit',
  fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',
  font_formats: font,
  lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5",
  height: 400,
  placeholder: '在这里输入正文内容',
  branding: false,
  resize: false,
  statusbar: false,
  content_style: "img {max-width:100%;}",
  paste_data_images: true,
  images_upload_handler,

})
const html = ref(props.modelValue)
tinymce.init({})
watch(html, () => emit('update:modelValue', html.value))

</script>

